<!DOCTYPE html>
<!--suppress ALL -->
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="scripts/libs/jquery.min.js"></script>
    <script>window.$ = window.jQuery = require("./scripts/libs/jquery.min");</script>

    <link rel="stylesheet" href="styles/toast.css" media="screen" type="text/css"/>

    <style type="text/css">
        body, div, h2 {
            margin: auto;
            padding: auto;
        }

        body {
            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
            color: #333;
        }

        .draga {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: auto;
            height: auto;
            background: #fff;
            border: 1px solid #444;
            border-radius: 1px;
        }

        .draga .title {
            position: relative;
            height: 27px;
            margin: 5px;
        }

        .draga .title h2 {
            font-size: 14px;
            height: 27px;
            line-height: 24px;
            border-bottom: 1px solid #A1B4B0;
        }

        .draga .title div {
            position: absolute;
            height: 19px;
            top: 2px;
            right: 0;
        }

        .draga .title a.min {
            background-position: -29px 0;
        }

        .draga .title a.min:hover {
            background-position: -29px -29px;
        }

        .draga .title a.max {
            background-position: -60px 0;
        }

        .draga .title a.max:hover {
            background-position: -60px -29px;
        }

        .draga .title a.revert {
            background-position: -149px 0;
            display: none;
        }

        .draga .title a.revert:hover {
            background-position: -149px -29px;
        }

        .draga .title a.close {
            background-position: -89px 0;
        }

        .draga .title a.close:hover {
            background-position: -89px -29px;
        }

        .xzm {
            width: 270px;
            margin: auto;
        }

        .content p {
            width: 180px;
            margin: 8px auto 4px;
        }

        .content .inp {
            width: 270px;
            margin: 8px auto;
        }

        .btn_div {
            width: 100px;
            margin: 10px auto 0;
        }
    </style>
</head>
<body>
<div id="drag" class="draga" style="display: block;">
    <div id="snackBar">Toast</div>
    <div class="title">
        <h2>Setting</h2>
        <div>
            <a class="close" id="close" title="关闭"><img src="img/close.png"></a>
        </div>
    </div>
    <div class="content">
        <div class="xzm">
            <p>请输入git 远程仓库地址 </p>
            <input type="text" class="inp" id="gitRepositories" placeholder="https://gitee.com/geliang/Blog"/>
            <button id="clone">clone</button>
            <input type="text" class="inp" id="gitDir" placeholder="默认保存路径:./"/>
            <button id="selectDir">更改</button>
            <input type="text" class="inp" id="name" placeholder="gitname"/>
            <!-- <input type="text" class="inp" id="username" value="geliang0120@gmail.com" placeholder="admin"/>
             <input type="text" class="inp" id="password" value="geliang890120" placeholder="123456"/>-->
        </div>
        <div class="btn_div">
            <button id="yes">确定</button>
            <button id="no">取消</button>

        </div>
    </div>
</div>


<script type="text/javascript">
    /*require('remote')*/
    var remote = require('electron').remote;
    var ipc = require('electron').ipcRenderer;
    const Toast = require('./scripts/toast.js');

    function close() {
        remote.getCurrentWindow().close();
    }

    function mulSelectDir(receiveChannel, receiveCallback) {
        ipc.on(receiveChannel, receiveCallback);
        ipc.send('openDirDialog', receiveChannel);

    }

    function windowPath2UnixPath(path) {
        return path.split('\\').join('/');
    }

    function saveConfig(json, gitRepositories, username, password, gitDir, name) {
        var json = {
            'repositories': gitRepositories.val(),
            'username': username.val(),
            'password': password.val(),
            'dir': gitDir.val(),
            'name': name.val(),
        };
        require('fs').writeFileSync(__dirname+"/../gitconfig.json", JSON.stringify(json));
        return json;
    }

    $(document).ready(function () {

        var gitRepositories = $("#gitRepositories");
        var username = $("#username");
        var password = $("#password");
        var gitDir = $("#gitDir");
        var name = $("#name");
        var gitconfig;
        try {
            gitconfig = JSON.parse(require('fs').readFileSync(windowPath2UnixPath(__dirname) + "/../gitconfig.json", 'utf-8'));
        } catch (e) {
            console.log("[INFO]  " + e);
            Toast.show("读取默认配置出错");
            gitconfig = {
                "repositories": "https://gitee.com/geliang/Blog.git"
                , "dir": windowPath2UnixPath(__dirname) + "/../"
                , "name": "Blog"
            }
        }
        var json = gitconfig;
        username && username.val(json.username);
        password && password.val(json.password);
        gitDir.val(json.dir);
        gitRepositories.val(json.repositories);

        gitRepositories.context.oninput = (view, event) => {
            var path = gitRepositories.val();
            console.log("input" + event)
            if (path.lastIndexOf(".git") > 0) {
                $("#gitDir").val(windowPath2UnixPath(__dirname) + "/../");
                $("#name").val(path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf(".git")));
            }
        };
        $("#clone").click(function () {
            saveConfig(json, gitRepositories, username, password, gitDir, name);
            Toast.show("clone...");
            require('electron').ipcRenderer.send('gitclone', json);
        });
        $("#selectDir").click(function () {
            mulSelectDir("selectDir", function (event, paths) {
                console.log("[INFO] path btn_select_path_texture_src");
                $("#gitDir").val(paths[0]);
            });
        });
        $("#yes").click(function () {
            json = saveConfig(json, gitRepositories, username, password, gitDir, name);
            close();
        });
        $("#no").click(function () {
            close();
        });
        $("#close").click(function () {
            close();
        });
    });
</script>
</body>
</html>
